<template>
    <div class="box">
      <headerBar :showBack=false></headerBar>
      <ul class="slide_box">
        <li v-for="(item,index) in currency_list" @click="chang_type(item.text)">
          <img :src="item.img" alt="">
          <span>{{item.text}}</span>
        </li>
      </ul>
      <ul class="list">
        <li v-for="(item,index) in market" v-if="now_type === item.name || now_type === '全部'" @click="go">
          <div>
            <p>{{item.name}} - USD</p>
            <p>24h 成交量 0</p>
          </div>
          <div>
            <span>{{item.price}}</span>
            <span>{{item.range}}</span>
          </div>
        </li>
      </ul>
    </div>
</template>
<script>
  import headerBar from '@/public/header'
  export default {
    components:{
      headerBar
    },
    data () {
      return {
        //要显示的币种类型
        now_type:"全部",
        currency_list:[
          {
            img:"../../static/img/touch-assets/1-all.png",
            text:"全部"
          },
          {
            img:"../../static/img/assets/2-bitcoin.png",
            text:"BTC"
          },
          {
            img:"../../static/img/assets/4-litecoin.png",
            text:"LTC"
          },
          {
            img:"../../static/img/assets/3-bitcoin.png",
            text:"BCH"
          },
          {
            img:"../../static/img/assets/5-Ethereum.png",
            text:"ETH"
          },
          {
            img:"../../static/img/assets/6-zec.png",
            text:"ZEC"
          },
          {
            img:"../../static/img/assets/7-dash.png",
            text:"DASH"
          }
        ],
        market:[
          {
            name:"BCH",
            range:"--",
            price:"--",
            className:"negative"
          },
          {
            name:"BTC",
            range:"--",
            price:"--",
            className:"negative"
          },
          {
            name:"LTC",
            range:"--",
            price:"--",
            className:"negative"
          },
          {
            name:"ETH",
            range:"--",
            price:"--",
            className:"negative"
          },
          {
            name:"ZEC",
            range:"--",
            price:"--",
            className:"negative"
          }
        ]
      }
    },
    methods: {
      //控制要显示的币种
      chang_type:function(str){
        this.now_type = str;
      },
      //跳转K线图页面
      go:function () {
//        window.location.href= domain.webUrl + "/weexh5/";
        window.location.href= "http://localhost:8081/BLC/BitCode_H5_NEW/weexh5/index.html?_ijt=dpagdm6f8f51udvfemac1sct72";
      },
      getIn:function(){
        this.commit("getIn");
      }
    },
    created(){
      let that = this;

      //计算涨跌幅
      let change_range = (a, b,i) => {
        a = Number(a);
        b = Number(b);
        if(a && b){
          if(Math.round((a - b) / b * 10000) / 100 > 0){
            this.market[i].className = "positive";
            return "+" + Math.round((a - b) / b * 10000) / 100 + "%";
          } else{
            this.market[i].className = "negative";
            return Math.round((a - b) / b * 10000) / 100 + "%";
          }
        } else{
          this.market[i].className = "";
          return "--"
        }
      };

      for(let i = 0; i <  that.market.length; i++){
        this.$websocket({
          "params": [
            that.market[i].name + "USD"
          ],
          "method": "today.subscribe",
          "id": 1000
        },function(data){
          let obj = JSON.parse(data.data);
          if(obj.params){
            that.market[i].price = obj.params[1].last != 0 ? obj.params[1].last : "--";
            that.market[i].range = change_range(obj.params[1].last,obj.params[1].open,i);
          }
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../style/var.less";
  .box{
    .full;
    background: #f9f9f9;
    padding-bottom: 0.9rem;
    overflow: auto;
    .slide_box{
      .full;
      height: 2rem;
      width: auto;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      li{
        display: inline-block;
        width: 2rem;
        text-align: center;
        .full-h;
        .relative;
        img{
          .full;
        }
        span{
          .absolute;
          top:1.2rem; left:50%;
          transform: translateX(-50%);
          font-size: 0.16rem;
        }
        &:nth-child(1){
          span{
            top:50%; left:50%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 0.3rem;
            color: #ffffff;
          }
        }
      }
    }
    .list{
      .full-w;
      li{
        .full-w;
        height: 1.39rem;
        margin-top: 0.1rem;
        background: url(../../static/img/card_bg.png);
        background-repeat: no-repeat;
        background-size: 100%;
        padding: 0.28rem 0.38rem;
        .flex;
        justify-content: space-between;
        div{
          &:nth-child(1){
            p{
              font-size: 0.26rem;
              &:nth-child(1){
                font-weight: 700;
                color: #626262;
              }
              &:nth-child(2){
                color: #b3b3b3;
              }
            }
          }
          &:nth-child(2){
            padding-top: 0.1rem;
            span{
              display: inline-block;
              &:nth-child(1){
                width: 1.82rem;
                font-size: 0.24rem;
                text-align: center;
                color: #626262;
              }
              &:nth-child(2){
                font-size: 0.22rem;
                width: 1.26rem;
                height: 0.45rem;
                background: #aaaaaa;
                border-radius:0.05rem;
                text-align: center;
                line-height: 0.45rem;
                color: #ffffff;
              }
              .positive{
                background: #499d2c;
              }
              .negative{
                background: #ef8633;
              }
            }
          }
        }
        &:nth-child(1){
          margin-top: 0.27rem;
        }
      }
    }
  }
</style>
